<template>
  <div>

    <!--新增按扭组合-->
    <el-button-group style="margin: 10px">
      <el-button type="primary" @click="addCollegeVisible= true" style="margin-top: 10px" >新增院系</el-button>
      <el-button type="primary" @click="addMajorVisible= true" style="margin-top: 10px" >新增专业</el-button>
    </el-button-group>

    <!-- 院系树型表格-->
    <el-table
        :data="tableData"
        :tree-props="{children: 'sysMajors'}"
        row-key="id"
        border
        stripe
        style="width: fit-content; margin-left: 10px">
      <el-table-column
          prop="college"
          label="院系"
          width="140">
      </el-table-column>
      <el-table-column
          prop="major"
          label="专业"
          width="160">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="160">
        <template slot-scope="scope">
          <el-button @click="editHandle(scope.row)" type="text">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="确定要删除这条记录吗？" @confirm="delHandle(scope.row)" >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--新增院系对话框-->
    <el-dialog title="新增院系" :visible.sync="addCollegeVisible" @closed="resetCollegeForm('collegeForm')" width="600px" >
      <el-form :model="collegeForm" :rules="collegeFormRules" ref="collegeForm">
        <el-form-item label="院系名称" prop="college" label-width="100px">
          <el-input v-model="collegeForm.college" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetCollegeForm('collegeForm')">取 消</el-button>
        <el-button type="primary" @click="submitCollegeForm('collegeForm')">提交</el-button>
      </div>
    </el-dialog>

    <!--修改院系对话框-->
    <el-dialog title="修改院系" :visible.sync="editCollegeVisible" @closed="resetEditCollegeForm('editCollegeForm')" width="600px" >
      <el-form :model="editCollegeForm" :rules="editCollegeFormRules" ref="editCollegeForm">
        <el-form-item label="旧院系名称" prop="oldName" label-width="100px">
          <el-input v-model="editCollegeForm.oldName" disabled ></el-input>
        </el-form-item>
        <el-form-item label="新院系名称" prop="newName" label-width="100px">
          <el-input v-model="editCollegeForm.newName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetEditCollegeForm('editCollegeForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditCollegeForm('editCollegeForm')">提交</el-button>
      </div>
    </el-dialog>

    <!--新增专业对话框-->
    <el-dialog title="请输入新增专业信息" :visible.sync="addMajorVisible" @closed="resetMajorForm('majorForm')" width="600px">
      <el-form :model="majorForm" :rules="majorFormRules" ref="majorForm">
        <el-form-item label="院系" prop="college" label-width="100px">
          <el-select v-model="majorForm.college" placeholder="请选择" clearable filterable>
            <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.college"
                :value="item.college"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major" label-width="100px">
          <el-input v-model="majorForm.major" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetMajorForm('majorForm')">取 消</el-button>
        <el-button type="primary" @click="submitMajorForm('majorForm')">提交</el-button>
      </div>
    </el-dialog>

    <!--修改专业对话框-->
    <el-dialog title="修改专业" :visible.sync="editMajorVisible" @closed="resetEditMajorForm('editMajorForm')" width="600px">
      <el-form :model="editMajorForm" :rules="editMajorFormRules" ref="editMajorForm">
        <el-form-item label="旧专业名" prop="oldName" label-width="100px">
          <el-input v-model="editMajorForm.oldName" disabled ></el-input>
        </el-form-item>
        <el-form-item label="新专业名" prop="newName" label-width="100px">
          <el-input v-model="editMajorForm.newName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetEditMajorForm('editMajorForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditMajorForm('editMajorForm')">提交</el-button>
      </div>
    </el-dialog>


    <!--  批量新增对话框-->
<!--    <el-dialog-->
<!--        title="请选择批量新增人员的文件"-->
<!--        :visible.sync="dialogFormVisible5"-->
<!--        width="600px"-->
<!--        @closed="resetForm('moreForm')">-->

<!--      <el-form :model="moreForm" :rules="moreFormRules" ref="moreForm">-->

<!--        <el-form-item label="" prop="filename" label-width="120px">-->

<!--          <el-upload-->
<!--              class="upload-demo"-->
<!--              action="https://jsonplaceholder.typicode.com/posts/"-->
<!--              :on-preview="handlePreview"-->
<!--              :on-remove="handleRemove"-->
<!--              :before-remove="beforeRemove"-->
<!--              multiple-->
<!--              :limit="1"-->
<!--              :on-exceed="handleExceed"-->
<!--              :file-list="fileList">-->
<!--            <el-button size="small" type="primary">点击上传</el-button>-->
<!--            <div slot="tip" class="el-upload__tip">只能上传csv文件，且不超过500kb</div>-->
<!--          </el-upload>-->

<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-dialog>-->


  </div>
</template>

<script>
// import qs from 'qs'
export default {
  name: "Colleges",
  data() {
    return {
      //表格数据
      tableData: [
      ],

      collegeForm:{},
      editCollegeForm:{},
      editMajorForm:{},
      majorForm:{},

      addForm:{
        name:''
      },

      addCollegeVisible: false,
      editCollegeVisible: false,
      addMajorVisible: false,
      editMajorVisible: false,

      //院系表单规则
      collegeFormRules: {
        college: [
          {required: true, message: '请输入院系名称', trigger: 'blur'},
          {pattern:/^([\u4E00-\uFA29]*[a-z]*[A-Z]*)+$/,message: "院系只能出现中文或英文字符",trigger:"blur"}
        ],
      },
      //专业表单规则
      majorFormRules: {
        college: [
          {required: true, message: '请输入院系名称', trigger: 'blur'},
          // {pattern:/^([\u4E00-\uFA29]*[a-z]*[A-Z]*)+$/,message: "院系名只能出现中文或英文字符",trigger:"blur"}
        ],
        major: [
          {required: true, message: '请输入专业名称', trigger: 'blur'},
          {pattern:/^([\u4E00-\uFA29]*[a-z]*[A-Z]*)+$/,message: "专业只能出现中文或英文字符",trigger:"blur"}
        ],
      },
      //编辑院系表单规则
      editCollegeFormRules: {
        newName: [
          {required: true, message: '请输入新院系名称', trigger: 'blur'},
          {pattern:/^([\u4E00-\uFA29]*[a-z]*[A-Z]*)+$/,message: "只能出现中文或英文字符",trigger:"blur"}
        ],
      },
      //编辑专业表单规则
      editMajorFormRules: {
        newName: [
          {required: true, message: '请输入新专业名称', trigger: 'blur'},
          {pattern:/^([\u4E00-\uFA29]*[a-z]*[A-Z]*)+$/,message: "只能出现中文或英文字符",trigger:"blur"}
        ],
      },

    }
  },
  created() {
    this.getCollegeList();
  },
  methods:{
    //获取院系列表
    getCollegeList(){
      this.$axios.get('/sys/college/list').then(res => {
        this.tableData = res.data.data
      })
    },

    //编辑院系专业
    editHandle(row){
      console.log(row.college);
      console.log(row.major);
      //院系
      if(row.major === undefined ){
        this.editCollegeForm.oldName = row.college;
        this.editCollegeVisible = true;
      }
      //专业
      else{
        this.editMajorForm.oldName = row.major;
        this.editMajorVisible = true;
      }
    },
    //手动删除
    delHandle(row) {
      console.log(row.college);
      console.log(row.major);
      //如果这一行是院系
      if(row.major === undefined ){
        this.$axios.post("/sys/college/delete?", {college:row.college}).then(res => {
          console.log(res)
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
            onClose: () => {
              this.getCollegeList()
              //刷新一下
              window.location.reload();
            }
          });
        })
      }
      //如果这一行是专业
      else{
        this.$axios.post("/sys/major/delete?", {major:row.major}).then(res => {
          console.log(res)
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
            onClose: () => {
              this.getCollegeList()
              //刷新一下
              window.location.reload();
            }
          });
        })
      }
    },

    //1提交新增院系表单
    submitCollegeForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/college/save',this.collegeForm).then(res => {
            console.log(res.data)
            this.resetCollegeForm(formName)
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.getCollegeList()
              }
            });
          })
          this.addCollegeVisible = false;
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },
    //2提交修改院系表单
    submitEditCollegeForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/college/update',this.editCollegeForm).then(res => {
            console.log(res.data)
            this.resetEditCollegeForm(formName)
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.getCollegeList()
              }
            });
          })
          this.editCollegeVisible = false;
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },
    //3提交新增专业表单
    submitMajorForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/major/save',this.majorForm)
              .then(res => {
                console.log(res.data)
                this.resetMajorForm(formName)
                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose: () => {
                    this.getCollegeList()
                  }
                });
              })
          this.addMajorVisible = false;
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },
    //4提交编辑专业表单
    submitEditMajorForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/major/update',this.editMajorForm)
              .then(res => {
                console.log(res.data)
                this.resetEditMajorForm(formName)
                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose: () => {
                    this.getCollegeList()
                  }
                });
              })
          this.editMajorVisible = false
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },

    //重设院系表单
    resetCollegeForm(formName){
      this.$refs[formName].resetFields();
      this.collegeForm = {}
      this.addCollegeVisible = false
    },
    //重设编辑院系表单
    resetEditCollegeForm(formName){
      this.$refs[formName].resetFields();
      this.editCollegeForm = {}
      this.editCollegeVisible = false
    },
    //重设专业表单
    resetMajorForm(formName){
      this.$refs[formName].resetFields();
      this.majorForm = {}
      this.addMajorVisible = false
    },
    //重设编辑专业表单
    resetEditMajorForm(formName){
      this.$refs[formName].resetFields();
      this.editMajorForm = {}
      this.editMajorVisible = false
    },

    //上传文件相关
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }


  }
}
</script>

<style scoped>
.dialog-footer{
  text-align: center;
}
</style>